<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入初始化样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入index样式 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入jQuery -->
    <script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
    <!-- 引入工具函数 -->
    <script type="text/javascript" src="js/utils.js"></script>
    <!-- 引入baseJS文件-->
    <script type="text/javascript" src="js/index.js"></script>
    <title>$funny</title>
</head>
<body>
    <div id="wrapper">
       <!-- header -->
       <div id="header">
          <div class="inner">
              <!-- logo -->
              <div id="logo">
                  <a href="javascript:;">
                      <img src="images/logo.gif" />
                  </a>
              </div>
              <!-- searchGoods -->
              <div id="search">
                  <input id="search_goods" type="text" value="请输入商品名称" />
              </div>
              <!-- theme -->
              <div id="theme">
                  <ul>
                      <li title="蓝色" data-bg="#4A4A4A" data-bg1="#6E6E6E"></li>
                      <li title="紫色" data-bg="#BE46D8" data-bg1="#D49AE1"></li>
                      <li title="红色" data-bg="#E44072" data-bg1="#F296B2" ></li>
                      <li title="天蓝色" data-bg="#37C7D4" data-bg1="#98E0E6"></li>
                      <li title="橙色" data-bg="#F9AF2A" data-bg1="#FFCF78"></li>
                      <li title="淡蓝色" data-bg="#B1D410" data-bg1="#CDE074"></li>
                  </ul>
              </div>
              <!-- nav -->
              <div id="nav">
                  <ul>
                      <li class="nav-item">
                          <a href="javascript:;">首页</a>
                      </li>
                      <li class="nav-item">
                          <a href="javascript:;">品牌</a>
                          <div class="sub-nav">
                              <dl class="sub-nav-top">
                                  <dt class="title">男装: </dt>
                                  <dd class="content">
                                      <a href="javascript:;">耐克</a> |
                                      <a href="javascript:;">阿迪达斯</a> |
                                      <a href="javascript:;">达芙妮</a> |
                                      <a href="javascript:;">李宁</a> |
                                      <a href="javascript:;">安踏</a> |
                                      <a href="javascript:;">奥康</a> |
                                      <a href="javascript:;">骆驼</a> |
                                      <a href="javascript:;">特步</a> |
                                      <a href="javascript:;">耐克</a> |
                                      <a href="javascript:;">阿迪达斯</a> |
                                      <a href="javascript:;">骆驼</a> |
                                      <a href="javascript:;">特步</a> |
                                      <a href="javascript:;">阿迪达斯</a>
                                  </dd>
                              </dl>
                              <dl class="sub-nav-bottom">
                                  <dt class="title">女装: </dt>
                                  <dd class="content">
                                      <a href="javascript:;">耐克</a> |
                                      <a href="javascript:;">阿迪达斯</a> |
                                      <a href="javascript:;">达芙妮</a> |
                                      <a href="javascript:;">李宁</a> |
                                      <a href="javascript:;">安踏</a> |
                                      <a href="javascript:;">奥康</a> |
                                      <a href="javascript:;">骆驼</a> |
                                      <a href="javascript:;">特步</a> |
                                      <a href="javascript:;">耐克</a> |
                                      <a href="javascript:;">阿迪达斯</a> |
                                      <a href="javascript:;">骆驼</a> |
                                      <a href="javascript:;">特步</a> |
                                      <a href="javascript:;">阿迪达斯</a>
                                  </dd>
                              </dl>
                          </div>
                      </li>
                      <li class="nav-item">
                          <a href="javascript:;">女装</a>
                          <div class="sub-nav">
                              <dl class="sub-nav-top">
                                  <dt class="title">男装: </dt>
                                  <dd class="content">
                                      <a href="javascript:;">耐克</a> |
                                      <a href="javascript:;">阿迪达斯</a> |
                                      <a href="javascript:;">达芙妮</a> |
                                      <a href="javascript:;">李宁</a> |
                                      <a href="javascript:;">安踏</a> |
                                      <a href="javascript:;">奥康</a> |
                                      <a href="javascript:;">骆驼</a> |
                                      <a href="javascript:;">特步</a> |
                                      <a href="javascript:;">耐克</a> |
                                      <a href="javascript:;">阿迪达斯</a> |
                                      <a href="javascript:;">骆驼</a> |
                                      <a href="javascript:;">特步</a> |
                                      <a href="javascript:;">阿迪达斯</a>
                                  </dd>
                              </dl>
                              <dl class="sub-nav-bottom">
                                  <dt class="title">女装: </dt>
                                  <dd class="content">
                                      <a href="javascript:;">耐克</a> |
                                      <a href="javascript:;">阿迪达斯</a> |
                                      <a href="javascript:;">达芙妮</a> |
                                      <a href="javascript:;">李宁</a> |
                                      <a href="javascript:;">安踏</a> |
                                      <a href="javascript:;">奥康</a> |
                                      <a href="javascript:;">骆驼</a> |
                                      <a href="javascript:;">特步</a> |
                                      <a href="javascript:;">耐克</a> |
                                      <a href="javascript:;">阿迪达斯</a> |
                                      <a href="javascript:;">骆驼</a> |
                                      <a href="javascript:;">特步</a> |
                                      <a href="javascript:;">阿迪达斯</a>
                                  </dd>
                              </dl>
                          </div>
                      </li>
                      <li class="nav-item">
                          <a href="javascript:;">男装</a>
                          <div class="sub-nav">
                              <dl class="sub-nav-top">
                                  <dt class="title">男装: </dt>
                                  <dd class="content">
                                      <a href="javascript:;">耐克</a> |
                                      <a href="javascript:;">阿迪达斯</a> |
                                      <a href="javascript:;">达芙妮</a> |
                                      <a href="javascript:;">李宁</a> |
                                      <a href="javascript:;">安踏</a> |
                                      <a href="javascript:;">奥康</a> |
                                      <a href="javascript:;">骆驼</a> |
                                      <a href="javascript:;">特步</a> |
                                      <a href="javascript:;">耐克</a> |
                                      <a href="javascript:;">阿迪达斯</a> |
                                      <a href="javascript:;">骆驼</a> |
                                      <a href="javascript:;">特步</a> |
                                      <a href="javascript:;">阿迪达斯</a>
                                  </dd>
                              </dl>
                              <dl class="sub-nav-bottom">
                                  <dt class="title">女装: </dt>
                                  <dd class="content">
                                      <a href="javascript:;">耐克</a> |
                                      <a href="javascript:;">阿迪达斯</a> |
                                      <a href="javascript:;">达芙妮</a> |
                                      <a href="javascript:;">李宁</a> |
                                      <a href="javascript:;">安踏</a> |
                                      <a href="javascript:;">奥康</a> |
                                      <a href="javascript:;">骆驼</a> |
                                      <a href="javascript:;">特步</a> |
                                      <a href="javascript:;">耐克</a> |
                                      <a href="javascript:;">阿迪达斯</a> |
                                      <a href="javascript:;">骆驼</a> |
                                      <a href="javascript:;">特步</a> |
                                      <a href="javascript:;">阿迪达斯</a>
                                  </dd>
                              </dl>
                          </div>
                      </li>
                      <li class="nav-item"><a href="javascript:;">鞋包配饰</a></li>
                  </ul>
              </div>
          </div>
       </div>

       <!-- main -->
       <div id="main">
           <!-- categories -->
           <div id="categories">
                <h1 title="商品分类" class="title">商品分类</h1>
                <div class="content">
                    <div class="category-item">
                        <h3 class="title">推荐品牌</h3>
                        <ul>
                            <li><a href="javascript:;">耐克</a></li>
                            <li><a href="javascript:;">阿迪达斯</a></li>
                            <li><a href="javascript:;">达芙妮</a></li>
                            <li><a href="javascript:;">李宁</a></li>
                            <li><a href="javascript:;">安踏</a></li>
                            <li><a href="javascript:;">奥康</a></li>
                            <li><a href="javascript:;">骆驼</a></li>
                            <li><a href="javascript:;">特步</a></li>
                        </ul>
                    </div>
                    <div class="category-item">
                        <h3 class="title">女装</h3>
                        <ul>
                            <li><a href="javascript:;">呢大衣</a></li>
                            <li><a href="javascript:;">T恤</a></li>
                            <li><a href="javascript:;">羽绒</a></li>
                            <li><a href="javascript:;">衬衫</a></li>
                            <li><a href="javascript:;">羊绒衫</a></li>
                            <li><a href="javascript:;">针织</a></li>
                            <li><a href="javascript:;">连衣裙</a></li>
                            <li><a href="javascript:;">皮外套</a></li>
                        </ul>
                    </div>
                    <div class="category-item">
                        <h3 class="title">男装</h3>
                        <ul>
                            <li><a href="javascript:;">衬衫</a></li>
                            <li><a href="javascript:;">T恤衫</a></li>
                            <li><a href="javascript:;">夹克</a></li>
                            <li><a href="javascript:;">大皮衣</a></li>
                            <li><a href="javascript:;">风衣</a></li>
                            <li><a href="javascript:;">牛仔裤</a></li>
                            <li><a href="javascript:;">西服</a></li>
                            <li><a href="javascript:;">卫衣</a></li>
                        </ul>
                    </div>
                    <div class="category-item">
                        <h3 class="title">鞋包配饰</h3>
                        <ul>
                            <li><a href="javascript:;">围巾</a></li>
                            <li><a href="javascript:;">旅行箱</a></li>
                            <li><a href="javascript:;">真皮包</a></li>
                            <li><a href="javascript:;">韩版</a></li>
                            <li><a href="javascript:;">达芙妮</a></li>
                            <li><a href="javascript:;">单肩包</a></li>
                            <li><a href="javascript:;">毛线</a></li>
                            <li><a href="javascript:;">清仓靴子</a></li>
                        </ul>
                    </div>
                </div>
           </div>
           <!-- advertise-->
           <div id="ad">
               <div id="ad-t">
                   <div id="carousel">
                       <ul>
                           <li class="active">
                               <a href="javascript:;">
                                    <img src="images/ads/1.jpg" alt="">
                                </a>
                           </li>
                           <li>
                               <a href="javascript:;">
                                   <img src="images/ads/2.jpg" alt="">
                               </a>
                           </li>
                           <li>
                               <a href="javascript:;">
                                   <img src="images/ads/3.jpg" alt="">
                               </a>
                           </li>
                           <li>
                               <a href="javascript:;">
                                   <img src="images/ads/4.jpg" alt="">
                               </a>
                           </li>
                           <li>
                               <a href="javascript:;">
                                   <img src="images/ads/5.jpg" alt="">
                               </a>
                           </li>
                       </ul>
                       <ol>
                           <li class="active">
                               <span>想约情人节</span>
                               <span>全场119元起</span>
                           </li>
                           <li>
                               <span>想约情人节</span>
                               <span>全场119元起</span>
                           </li>
                           <li>
                               <span>想约情人节</span>
                               <span>全场119元起</span>
                           </li>
                           <li>
                               <span>想约情人节</span>
                               <span>全场119元起</span>
                           </li>
                           <li>
                               <span>想约情人节</span>
                               <span>全场119元起</span>
                           </li>
                       </ol>
                   </div>
                   <div id="newDynamic">
                       <div class="ad" id="discount">
                           <a class="pic" href="javascript:;">
                               <img src="./images/upload/20120216.jpg" alt="">
                           </a>
                       </div>
                       <div class="content">
                            <h3 class="title">最新动态</h3>
                            <ul>
                                <li>
                                    <a title="[活动] 伊伴春鞋迎春大促" href="javascript:;">[活动] 伊伴春鞋迎春大促</a>
                                </li>
                                <li>
                                    <a title="[活动] 千百度冬靴新品火热让利" href="javascript:;">[活动] 千百度冬靴新品火热让利</a>
                                </li>
                                <li>
                                    <a title="[活动] COEY秋冬新品全场2.3折起" href="javascript:;">[活动] COEY秋冬新品全场2.3折起</a>
                                </li>
                                <li>
                                    <a title="[活动] 千百度冬靴新品火热让利" href="javascript:;">[活动] 千百度冬靴新品火热让利</a>
                                </li>
                                <li>
                                    <a title="[活动] COEY秋冬新品全场2.3折起" href="javascript:;">[活动] COEY秋冬新品全场2.3折起</a>
                                </li>
                            </ul>
                        </div>
                   </div>
               </div>
               <div id="activity">
                   <div class="activity-t">
                       <h3 class="title">品牌活动</h3>
                       <ul class="nav">
                           <li class="active">
                               <a href="javascript:;">运动</a>
                           </li>
                           <li>
                               <a href="javascript:;">女鞋</a>
                           </li>
                           <li>
                               <a href="javascript:;">男鞋</a>
                           </li>
                           <li>
                               <a href="javascript:;">童鞋</a>
                           </li>
                       </ul>
                   </div>
                   <div class="content"> <!--775 1550-->
                       <ul>
                           <li>
                               <a href="javascript:;">
                                   <img class="pic" src="./images/upload/20120217.jpg" alt="">
                               </a>
                               <span class="txt">
                                   <a href="javascript:;">耐克</a>
                               </span>
                               <span class="mask"></span>
                           </li>
                           <li>
                               <a href="javascript:;">
                                   <img class="pic" src="./images/upload/20120218.jpg" alt="">
                               </a>
                               <span class="txt">
                                   <a href="javascript:;">阿迪达斯</a>
                               </span>
                               <span class="mask"></span>
                           </li>
                           <li>
                               <a href="javascript:;">
                                   <img class="pic" src="./images/upload/20120219.png" alt="">
                               </a>
                               <span class="txt">
                                   <a href="javascript:;">李宁</a>
                               </span>
                               <span class="mask"></span>
                           </li>
                           <li>
                               <a href="javascript:;">
                                   <img class="pic" src="./images/upload/20120220.png" alt="">
                               </a>
                               <span class="txt">
                                   <a href="javascript:;">安踏</a>
                               </span>
                               <span class="mask"></span>
                           </li>

                           <li>
                               <a href="javascript:;">
                                   <img class="pic" src="./images/upload/20120220.png" alt="">
                               </a>
                               <span class="txt">
                                   <a href="javascript:;">安踏</a>
                               </span>
                               <span class="mask"></span>
                           </li>
                           <li>
                               <a href="javascript:;">
                                   <img class="pic" src="./images/upload/20120219.png" alt="">
                               </a>
                               <span class="txt">
                                   <a href="javascript:;">李宁</a>
                               </span>
                               <span class="mask"></span>
                           </li>
                           <li>
                               <a href="javascript:;">
                                   <img class="pic" src="./images/upload/20120218.jpg" alt="">
                               </a>
                               <span class="txt">
                                   <a href="javascript:;">阿迪达斯</a>
                               </span>
                               <span class="mask"></span>
                           </li>
                           <li>
                               <a href="javascript:;">
                                   <img class="pic" src="./images/upload/20120217.jpg" alt="">
                               </a>
                               <span class="txt">
                                   <a href="javascript:;">耐克</a>
                               </span>
                               <span class="mask"></span>
                           </li>

                           <li>
                               <a href="javascript:;">
                                   <img class="pic" src="./images/upload/20120217.jpg" alt="">
                               </a>
                               <span class="txt">
                                   <a href="javascript:;">耐克</a>
                               </span>
                               <span class="mask"></span>
                           </li>
                           <li>
                               <a href="javascript:;">
                                   <img class="pic" src="./images/upload/20120218.jpg" alt="">
                               </a>
                               <span class="txt">
                                   <a href="javascript:;">阿迪达斯</a>
                               </span>
                               <span class="mask"></span>
                           </li>
                           <li>
                               <a href="javascript:;">
                                   <img class="pic" src="./images/upload/20120219.png" alt="">
                               </a>
                               <span class="txt">
                                   <a href="javascript:;">李宁</a>
                               </span>
                               <span class="mask"></span>
                           </li>
                           <li>
                               <a href="javascript:;">
                                   <img class="pic" src="./images/upload/20120220.png" alt="">
                               </a>
                               <span class="txt">
                                   <a href="javascript:;">安踏</a>
                               </span>
                               <span class="mask"></span>
                           </li>

                           <li>
                               <a href="javascript:;">
                                   <img class="pic" src="./images/upload/20120220.png" alt="">
                               </a>
                               <span class="txt">
                                   <a href="javascript:;">安踏</a>
                               </span>
                               <span class="mask"></span>
                           </li>
                           <li>
                               <a href="javascript:;">
                                   <img class="pic" src="./images/upload/20120219.png" alt="">
                               </a>
                               <span class="txt">
                                   <a href="javascript:;">李宁</a>
                               </span>
                               <span class="mask"></span>
                           </li>
                           <li>
                               <a href="javascript:;">
                                   <img class="pic" src="./images/upload/20120218.jpg" alt="">
                               </a>
                               <span class="txt">
                                   <a href="javascript:;">阿迪达斯</a>
                               </span>
                               <span class="mask"></span>
                           </li>
                           <li>
                               <a href="javascript:;">
                                   <img class="pic" src="./images/upload/20120217.jpg" alt="">
                               </a>
                               <span class="txt">
                                   <a href="javascript:;">耐克</a>
                               </span>
                               <span class="mask"></span>
                           </li>
                       </ul>
                   </div>
               </div>
           </div>
       </div>

       <!-- footer -->
       <div id="footer">
           Copyright © 2009 - 2012 JaneShop Inc.
       </div>
    </div>
</body>
</html>

